<template>
  <div>
    <div class="ser_div">
      <el-row>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 产品 </el-col>
            <el-col :span="16">
              <el-select filterable clearable v-model="ser.product_id" placeholder="请选择产品" style="width: 100%"
                @change="product_id_change_ser">
                <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 型号</el-col>
            <el-col :span="16">
              <el-select filterable clearable v-model="ser.model_number_id" @change="model_number_id_change_ser"
                placeholder="请选择型号" style="width: 100%">
                <el-option v-for="(item, index) in ModelNumberList" :key="index" :label="item.model_number"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-button @click="add_specification" icon="el-icon-plus" class="add_btn">新增规格</el-button>
          <el-button @click="add_jiage" icon="el-icon-plus" class="add_btn">批量添加工价</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="dataList" stripe style="width: 100%" border>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="specification" label="规格"> </el-table-column>
      <el-table-column prop="specification" label="图片" width="90">
        <template slot-scope="scope">
          <img v-if="scope.row.image" :src="uploadImgUrl + scope.row.image" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column prop="size" label="尺寸"> </el-table-column>
      <el-table-column prop="num" label="位数"> </el-table-column>
      <el-table-column prop="updated_at" label="时间"> </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <el-button type="primary" size="small">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button @click="set_product(scope.row)" type="text" size="mini">编辑</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
                  title="是否删除这条数据？" @confirm="del_product(scope.row)">
                  <el-button slot="reference" type="text" size="mini">
                    删除</el-button>
                </el-popconfirm>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button @click="chicun_weishu(scope.row)" type="text" size="mini">尺寸/位数</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button @click="get_ProductspecificationJobTypeList(scope.row)" type="text"
                  size="mini">添加工价</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button @click="tongbu_click(scope.row)" type="text" size="mini">同步工价</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background @prev-click="prev"
        @next-click="next" :current-page.sync="pagination.page" :page-size="pagination.per_page"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="addtitle" :visible.sync="isProduct" width="30%" :close-on-click-modal="false"
      @close="isProduct_close">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="规格名称" prop="specification">
          <el-input v-model="ruleForm.specification" style="width: 100%">
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="尺寸">
          <el-input v-model="ruleForm.size"  style="width: 100%" type="number">
          </el-input>
        </el-form-item>
        <el-form-item label="位数">
          <el-input v-model="ruleForm.num" style="width: 100%" type="number">
          </el-input>
        </el-form-item> -->
        <el-form-item label="图片">
          <uplodeImg ref="Upload" :value="imgUrl" :limit="1" @suburl="subImg"></uplodeImg>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isProduct = false">取 消</el-button>
        <el-button type="primary" @click="submitadd('ruleForm')">确定</el-button>
        <!-- <el-button type="primary" @click="update_Specification" v-if="isadd==2">确定</el-button>    -->
      </span>
    </el-dialog>

    <el-dialog title="设置工价" :visible.sync="isjobtype" width="35%" :close-on-click-modal="false"
      @close="close_isjobtype">
      <div class="ser_div" style="margin-bottom: 25px">
        <el-row>
          <el-col :span="11">
            <el-row style="display: flex; align-items: center">
              <el-col :span="8" style="text-align: center"> 产品 </el-col>
              <el-col :span="16">
                <el-select filterable v-model="ser.product_id" disabled placeholder="请选择产品" style="width: 100%"
                  @change="product_id_change">
                  <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="11">
            <el-row style="display: flex; align-items: center">
              <el-col :span="8" style="text-align: center"> 型号</el-col>
              <el-col :span="16">
                <el-select filterable v-model="ser.model_number_id" disabled @change="get_ProductspecificationJobTypeLists"
                  placeholder="请选择型号" style="width: 100%">
                  <el-option v-for="(item, index) in ModelNumberList" :key="index" :label="item.model_number"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="11">
            <el-row style="display: flex; align-items: center">
              <el-col :span="8" style="text-align: center"> 规格</el-col>
              <el-col :span="16">
                  {{specification_name}}
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="11">
            <el-row style="display: flex; align-items: center">
              <el-col :span="8" style="text-align: center"> 系数</el-col>
              <el-col :span="16">
                <el-input-number @change="xishu_price" v-model="xishu_s" :precision="2" :min="0"></el-input-number>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>

      <div class="lis" v-for="item in ProductJobTypeList_sp" :key="item.id">
        <el-row style="
            display: flex;
            align-items: center;
            margin-top: 5px;
            justify-content: center;
          ">
          <el-col :span="3" style="text-align: center">
            <span>{{ item.job_type }}</span>
          </el-col>
          <el-col :span="5">
            <el-input-number v-model="item.price"   :precision="2"></el-input-number>
          </el-col>
          <el-col :span="9">
            <el-input v-model="item.short_time" type="number" placeholder="最短完成时间">
              <template slot="append">分钟</template>
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-input v-model="item.remark" placeholder="请输入工艺备注"></el-input>
          </el-col>
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isjobtype = false">取 消</el-button>
        <el-button type="primary" @click="set_JobTypePriceBySpecificationId">确定</el-button>
      </span>
    </el-dialog>

    <!-- 同步工价 -->
    <el-dialog title="同步工价" :visible.sync="istongbu" width="50%" :close-on-click-modal="false"
      @close="isProduct_close_2">
      <el-form :model="ruleFormt" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="产品" prop="product_id">
          <el-select filterable multiple v-model="ruleFormt.product_ids" placeholder="请选择产品" style="width: 100%"
            @change="product_id_change_tb">
            <el-option v-for="(item, index) in productList_tb" :key="index" :label="item.product_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="型号" prop="product_id">
          <el-select filterable multiple v-model="ruleFormt.model_number_ids" placeholder="请选择型号"
            @change="model_number_change_tb" style="width: 100%">
            <el-option v-for="(item, index) in ModelNumberList_tb" :key="index" :label="item.model_number"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格名称" prop="specification_ids">
          <el-radio-group v-model="isradio" @input="radio_input" size="mini">
            <el-radio-button label="0">全选</el-radio-button>
            <el-radio-button label="1">多选</el-radio-button>
          </el-radio-group>
          <el-select filterable multiple v-if="isradio === '1'" v-model="ruleFormt.specification_ids"
            placeholder="请选择规格" style="width: 100%">
            <el-option v-for="(item, index) in specificationList_tb" :key="index" :label="item.specification"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="istongbu = false">取 消</el-button>
        <el-button type="primary" @click="set_istongbu">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="批量设置工价" :visible.sync="isjobtype_pl" width="50%" :close-on-click-modal="false"
      @close="close_isjobtype_pl">
      <el-row style="display: flex; align-items: center">
        <el-col :span="4" style="text-align: center"> 产品 </el-col>
        <el-col :span="16">
          <el-select filterable v-model="ser.product_id" placeholder="请选择产品" @change="getjobtype_pl"
            style="width: 100%">
            <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <div style="grid-template-columns: 1fr 1fr 1fr; margin-top: 15px">
        <div class="lis" v-for="item in ProductJobTypeList_pl" :key="item.id">
          <el-row style="display: flex; align-items: center; margin-top: 5px">
            <el-col :span="4" style="text-align: center; padding-right: 10px">
              <span>{{ item.job_type }}</span>
            </el-col>
            <el-col :span="5">
              <el-input-number v-model="item.price"></el-input-number>
            </el-col>
            <el-col :span="10">
              <el-input v-model="item.short_time" type="number" placeholder="请输入最短完成时间">
                <template slot="append">分钟</template>
              </el-input>
            </el-col>
            <!-- <el-col :span="7">
            <el-input v-model="item.remark" placeholder="请输入工艺备注"></el-input>
          </el-col> -->
          </el-row>
        </div>
      </div>
      <div style="margin-top: 15px" v-if="ProductJobTypeList_pl.length > 0">
        <el-row style="display: flex; align-items: center">
          <el-col :span="4" style="text-align: center"> 产品 </el-col>
          <el-col :span="16">
            <el-select filterable multiple v-model="piliang.product_ids" placeholder="请选择产品" style="width: 100%">
              <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name" :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="display: flex; align-items: center; margin-top: 15px">
          <el-col :span="4" style="text-align: center"> 型号</el-col>
          <el-col :span="16">
            <el-select filterable multiple v-model="piliang.model_number_ids" placeholder="请选择型号" style="width: 100%">
              <el-option v-for="(item, index) in ModelNumberList_pl" :key="index" :label="item.model_number"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="display: flex; align-items: center; margin-top: 15px">
          <el-col :span="4" style="text-align: center">规格</el-col>
          <el-col :span="16">
            <el-select filterable multiple v-model="piliang.specification_ids" placeholder="请选择规格" style="width: 100%">
              <el-option v-for="(item, index) in SpecificationList_pl" :key="index" :label="item.specification"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isjobtype_pl = false">取 消</el-button>
        <el-button type="primary" @click="batch_AddJobTypePrice">确定</el-button>
      </span>
    </el-dialog>


    <!-- 设置位数和尺寸 -->
    <el-dialog title="设置位数和尺寸" :visible.sync="isjobtype_ws" width="35%" :close-on-click-modal="false"
      @close="close_isjobtype_isjobtype_ws">
      <div class="ser_div" style="margin-bottom: 25px">
        <el-row>
          <el-col :span="11">
            <el-row style="display: flex; align-items: center">
              <el-col :span="8" style="text-align: center"> 产品 </el-col>
              <el-col :span="16">
                <el-select filterable v-model="ser.product_id" placeholder="请选择产品" style="width: 100%"
                  @change="product_id_change">
                  <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="11">
            <el-row style="display: flex; align-items: center">
              <el-col :span="8" style="text-align: center"> 型号</el-col>
              <el-col :span="16">
                <el-select filterable v-model="ser.model_number_id" @change="get_SpecificationSize" placeholder="请选择型号"
                  style="width: 100%">
                  <el-option v-for="(item, index) in ModelNumberList" :key="index" :label="item.model_number"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div style="margin-left:25px;">


        <el-form>
          <el-form-item label="尺寸">
            <el-input-number v-model="chicun_weishus.size" :precision="2" style="width: 100%" type="number">
            </el-input-number>
          </el-form-item>
          <el-form-item label="位数">
            <el-input-number v-model="chicun_weishus.num" style="width: 100%" type="number">
            </el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isjobtype_ws = false">取 消</el-button>
        <el-button type="primary" @click="save_SpecificationSize">确定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import uplodeImg from "@/components/ImageUpload";
import {
  getSpecificationList,
  createSpecification,
  deleteSpecification,
  getProductList,
  getModelNumberList,
  getProductJobTypeList,
  getJobTypePriceBySpecificationId,
  setJobTypePriceBySpecificationId,
  batchSetJobTypePrice,
  updateSpecification,
  addSpecification,
  getSameJobTypeListProductList,
  addSpecificationImage,
  getSpecificationImage,
  batchAddJobTypePrice,
  getSpecificationSize,
  saveSpecificationSize,
  getJobTypeCoefficient,
  getJobTypeWages
} from "@/api/product/index";
export default {
  components: {
    uplodeImg,
  },
  data() {
    return {
      xishu_s: 0,
      isjobtype_pl: false,
      imgUrl: "",
      addtitle: "",
      isadd: 1,
      isradio: "1",
      istongbu: false,
      isjobtype: false,
      productList: [],
      productList_tb: [],
      ModelNumberList: [],
      ModelNumberLists: [],
      ModelNumberList_tb: [],
      SpecificationList: [],
      specificationLists: [],
      specificationList_tb: [],
      ProductJobTypeList_sp: [],
      ser: {
        product_id: "",
        model_number_id: "",
        specification_id: "",
      },
      title: "",
      isProduct: false,
      dataList: [],
      pagination: {
        per_page: 999,
        page: 1,
      },
      ids: {
        product_id: "",
        model_number_id: "",
        specification_id: "",
      },
      ruleForm: {
        id: "",
        specification: "",
        image: "",
      },
      rules: {
        model_number_id: [
          {
            required: true,
            message: "请选择型号",
            trigger: "blur",
          },
        ],
        product_id: [
          {
            required: true,
            message: "请选择产品",
            trigger: "blur",
          },
        ],
        specification: [
          {
            required: true,
            message: "请输入规格名称",
            trigger: "blur",
          },
        ],
      },
      total: 0,
      file_url: "",
      ruleFormt: {
        old_product_id: "",
        old_model_number_id: "",
        old_specification_id: "",
        product_ids: [],
        model_number_ids: [],
        specification_ids: [],
      },
      uploadImgUrl: this.$global.imgQianJui,
      ProductJobTypeList_pl: [],
      ModelNumberList_pl: [],
      SpecificationList_pl: [],
      piliang: {
        product_ids: [],
        model_number_ids: [],
        specification_ids: [],
        job_type_price_arr: [],
      },
      isjobtype_ws: false,
      chicun_weishus: {
        size: 0,
        num: 0,
        id: ''
      },
      specification_name:""
    };
  },
  mounted() {
    this.getProduct();
    this.getlist();
  },
  methods: {
    xishu_price() {
      let obj = {
        product_id: this.ser.product_id,
        model_number_id: this.ser.model_number_id,
        specification_id: this.ids.specification_id
      }

      getJobTypeWages(obj).then(res => {
        if (res.code == 200) {
          if (res.data.length > 0) {
           
            let ProductJobTypeList_sp = res.data.map((obj) => ({
              // ...obj,
              price: this.xishu_s * obj.price,
            }));
            for(let i=0;i<this.ProductJobTypeList_sp.length;i++){
              this.ProductJobTypeList_sp[i].price=ProductJobTypeList_sp[i].price
            }
            console.log(this.ProductJobTypeList_sp)
          }
        }
      })
    },
    close_isjobtype_isjobtype_ws() {
      this.chicun_weishus = {
        size: 0,
        num: 0,
        id: ''
      }
    },
    save_SpecificationSize() {
      let obj = {
        product_id: this.ser.product_id,
        specification_id: this.chicun_weishus.id,
        model_number_id: this.ser.model_number_id,
        size: this.chicun_weishus.size,
        num: this.chicun_weishus.num
      }
      saveSpecificationSize(obj).then(res => {
        if (res.code == 200) {
          this.$message({
            message: '提交成功',
            type: 'success'
          });
        }
      })
    },
    chicun_weishu(row) {
      this.isjobtype_ws = true
      this.chicun_weishus.id = row.id
      if (this.ser.product_id && this.ser.model_number_id) {
        this.get_SpecificationSize()
      }
    },
    get_SpecificationSize() {
      let obj = {
        product_id: this.ser.product_id,
        specification_id: this.chicun_weishus.id,
        model_number_id: this.ser.model_number_id,
      }

      getSpecificationSize(obj).then(res => {
        if (res.code == 200) {
          if(res.data){
            this.chicun_weishus.size = res.data.size ? res.data.size : 0
           this.chicun_weishus.num = res.data.num ? res.data.num : 0
          }else{
            this.chicun_weishus.size = 0
           this.chicun_weishus.num =  0
          }
         
        }
      });
    },
    batch_AddJobTypePrice() {
      this.piliang.job_type_price_arr = this.ProductJobTypeList_pl;
      batchAddJobTypePrice(this.piliang).then((res) => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.isjobtype_pl = false;
          this.getlist();
        }
      });
    },
    get_SpecificationList() {
      getSpecificationList().then((res) => {
        if (res.code == 200) {
          this.SpecificationList_pl = res.data.data;
        }
      });
    },
    get_ModelNumberList() {
      getModelNumberList().then((res) => {
        if (res.code == 200) {
          this.ModelNumberList_pl = res.data.data;
        }
      });
    },
    //获取产品
    getProduct_PL() {
      getProductList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
        }
      });
    },
    close_isjobtype_pl() {
      this.ProductJobTypeList_pl = [];
      this.ser.product_id = "";
      this.piliang = {
        product_ids: [],
        model_number_ids: [],
        specification_ids: [],
        job_type_price_arr: [],
      };
    },
    add_jiage() {
      this.isjobtype_pl = true;
      this.getProduct_PL();
      this.get_ModelNumberList();
      this.get_SpecificationList();
    },
    getjobtype_pl(id) {
      console.log(id);
      getProductJobTypeList({ product_id: id }).then((res) => {
        if (res.code == 200) {
          this.ProductJobTypeList_pl = [];
          res.data.forEach((item) => {
            let obj = {
              job_type: item.job_type,
              job_type_id: item.id,
              price: "",
            };
            this.ProductJobTypeList_pl.push(obj);
          });
          // this.isjobtype = true;
        }
      });
    },
    subImg(url) {
      this.ruleForm.image = url;
      console.log(url);
    },
    close_isjobtype() {
      this.ProductJobTypeList_sp = [];
      // this.ser.product_id = "";
      // this.ser.model_number_id = "";
    },
    tongbu_click(row) {
      console.log(row);
      this.ruleFormt.old_product_id = this.ser.product_id;
      this.ruleFormt.old_model_number_id = this.ser.model_number_id;
      this.ruleFormt.old_specification_id = row.id;
      this.istongbu = true;
      getSameJobTypeListProductList({ product_id: this.ser.product_id }).then(
        (res) => {
          if (res.code == 200) {
            this.productList_tb = res.data;
          }
        }
      );
    },
    radio_input(val) {
      if (val == 0) {
        this.ruleFormt.specification_ids = [];
        this.specificationList_tb.forEach((item) => {
          this.ruleFormt.specification_ids.push(item.id);
        });
      } else {
        this.ruleFormt.specification_ids = [];
      }
    },
    model_number_change_add(val) {
      let obj = {
        product_id: this.ruleForm.product_id,
        model_number_id: val,
      };
      getSpecificationList({ ...obj, per_page: 1000 }).then((res) => {
        if (res.code == 200) {
          this.specificationList = res.data.data;
        }
      });
    },
    model_number_change_tb(val) {
      let obj = {
        product_id: this.ruleFormt.product_ids[0],
        model_number_id: val,
      };
      getSpecificationList({ ...obj, per_page: 1000 }).then((res) => {
        if (res.code == 200) {
          this.specificationList_tb = res.data.data;
        }
      });
    },
    set_istongbu() {
      batchSetJobTypePrice(this.ruleFormt).then((res) => {
        if (res.code == 200) {
          this.istongbu = false;
          this.$message.success("提交成功");
        }
      });
    },

    add_SpecificationImage() {
      let obj = {
        product_id: this.ser.product_id,
        model_number_id: this.ser.model_number_id,
        specification_id: this.ids.specification_id,
        file_url: this.file_url,
      };
      addSpecificationImage(obj).then((res) => {
        if (res.code == 200) {
          this.imgUrl = "";
        }
      });
    },
    get_SpecificationImage() {
      let obj = {
        product_id: this.ser.product_id,
        model_number_id: this.ser.model_number_id,
        specification_id: this.ids.specification_id,
      };
      getSpecificationImage(obj).then((res) => {
        if (res.code == 200) {
          this.imgUrl = this.uploadImgUrl + res.data.image;
          this.file_url = res.data.image;
        }
      });
    },
    set_JobTypePriceBySpecificationId() {
      let obj = {
        ...this.ids,
        job_type_price_arr: this.ProductJobTypeList_sp,
        coefficient: this.xishu_s
      };
      this.add_SpecificationImage();
      setJobTypePriceBySpecificationId(obj).then((res) => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.isjobtype = false;
          this.getProduct();
          this.ids = {
            product_id: "",
            model_number_id: "",
            specification_id: "",
          };
          this.ser = {
            product_id: "",
            model_number_id: "",
            specification_id: "",
          };
        }
      });
    },
    isProduct_close_2() {
      this.ruleFormt = {
        id: "",
        product_id: "",
        model_number_id: "",
        specification_id: "",
        product_ids: [],
        model_number_ids: [],
        specification_ids: [],
      };
    },
    isProduct_close() {
      this.ruleForm = {
        id: "",
        product_id: "",
        model_number_id: "",
        specification: "",
        image: "",
        specification_ids: [],
      };
    },
    get_ProductspecificationJobTypeList(row) {
      if(!this.ser.product_id || !this.ser.model_number_id){
        this.$message({
          message: "请先选择产品型号",
          type: "warning",
        });
        return;
      }else{
      this.ids.specification_id = row.id;
      this.specification_name= row.specification
      this.isjobtype = true;
      if (this.ser.model_number_id && this.ser.product_id) {
        this.get_ProductspecificationJobTypeLists();
        this.get_JobTypeCoefficient()

      }
    }
    },
    model_number_id_change_ser(val) {
      let obj = {
        product_id: this.ser.product_id,
        model_number_id: val,
      };
      getSpecificationList(obj).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
        }
      });
    },
    model_number_id_change(val) {
      let obj = {
        product_id: this.ser.product_id,
        model_number_id: val,
      };
      getSpecificationList(obj).then((res) => {
        if (res.code == 200) {
          this.SpecificationList = res.data.data;
        }
      });

      this.get_ProductspecificationJobTypeLists();
    },
    get_ProductspecificationJobTypeLists_pl() {
      this.ids.product_id = this.ser.product_id;
      this.ids.model_number_id = this.ser.model_number_id;
    },
    get_JobTypeCoefficient() {
      let obj = {
        product_id: this.ser.product_id,
        model_number_id: this.ser.model_number_id,
        specification_id: this.ids.specification_id
      }
      getJobTypeCoefficient(obj).then(res => {
        if (res.code == 200) {
          if(res.data){
            this.xishu_s = res.data.coefficient;
          }else{
            this.xishu_s=0
          }
         
        }
      });
    },
    // 查询产品规格工种列表
    get_ProductspecificationJobTypeLists() {
      // this.get_SpecificationImage()

      this.ids.product_id = this.ser.product_id;
      this.ids.model_number_id = this.ser.model_number_id;
      this.get_JobTypeCoefficient()
      let obj = {
        product_id: this.ser.product_id,
        model_number_id: this.ser.model_number_id,
        specification_id: this.ids.specification_id,
      };
      this.ProductJobTypeList_sp = [];
      getJobTypePriceBySpecificationId(obj).then((res) => {
        if (res.code == 200) {
          if (res.data.length == 0) {
            this.getjobtype(this.ser.product_id);
          } else {
            res.data.forEach((item) => {
              let obj = {
                job_type: item.job_type.job_type,
                job_type_id: item.job_type.id,
                price: item.price,
                remark: item.remark,
                short_time: item.short_time,
              };
              this.ProductJobTypeList_sp.push(obj);
            });
          }
        }
      });
    },
    getjobtype(id) {
      getProductJobTypeList({ product_id: id }).then((res) => {
        if (res.code == 200) {
          res.data.forEach((item) => {
            let obj = {
              job_type: item.job_type,
              job_type_id: item.id,
              price: "",
            };
            this.ProductJobTypeList_sp.push(obj);
          });
          this.isjobtype = true;
        }
      });
    },

    //获取产品
    getProduct() {
      getProductList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          // this.ser.product_id=res.data.data[0].id
          this.get_producModel(this.ser.product_id);
        }
      });
    },
    get_producModel(id) {
      getModelNumberList({
        product_id: id,
        field_list: "id,model_number",
        is_dropdown: 1,

      }).then((res) => {
        if (res.code == 200) {
          this.ser.model_number_id = "";
          this.ModelNumberList = res.data.data;
        }
      });
    },
    product_id_change_ser(val) {
      this.ser.model_number_id = "";
      this.ser.specification_id = "";
      this.get_producModel(val);
    },
    // 搜索
    product_id_change(val) {
      this.ModelNumberList = [];
      this.SpecificationList = [];

      this.get_producModel(val);
      // this.get_ProductspecificationJobTypeLists()
    },
    // 编辑
    product_id_change_2(val) {
      this.ModelNumberList = [];
      this.SpecificationList = [];
      this.get_producModel_2(val);
    },
    product_id_change_tb(val) {
      this.ModelNumberList_tb = [];
      this.SpecificationList = [];
      this.get_producModel_3(val);
    },
    get_producModel_3(id) {
      getModelNumberList({
        product_id: id,
        field_list: "id,model_number",
        is_dropdown: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList_tb = res.data.data;
          this.ruleForm.model_number_id = "";
          if (res.data.data.length > 0) {
            this.ruleForm.model_number_id = res.data.data[0].id;
          } else {
            this.$message.error("当前产品无型号,请先添加型号");
          }
        }
      });
    },
    get_producModel_2(id) {
      getModelNumberList({
        product_id: id,
        field_list: "id,model_number",
        is_dropdown: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberLists = res.data.data;
          this.ruleForm.model_number_id = "";
          if (res.data.data.length > 0) {
            this.ruleForm.model_number_id = res.data.data[0].id;
          } else {
            this.$message.error("当前产品无型号,请先添加型号");
          }
        }
      });
    },
    set_product(row) {
      // this.ruleForm = row;
      this.ruleForm.id = row.id;
      this.ruleForm.specification = row.specification;
      this.ruleForm.size = row.size;
      this.ruleForm.num = row.num;
      this.imgUrl = this.uploadImgUrl + row.image;
      console.log(this.imgUrl);
      this.ruleForm.image = row.image;
      // this.file_url=row.image

      this.addtitle = "编辑规格";
      this.isadd = 2;
      this.isProduct = true;
    },
    add_specification() {
      this.isadd = 1;
      this.imgUrl = "";
      this.addtitle = "新增规格";
      this.isProduct = true;
      // this.$nextTick(function () {
      //   this.$refs.ruleForm.resetFields();
      // });
      this.ruleForm = {
        id: "",
        image: "",
        specification: "",
        size: "",
        num: "",
      };
    },
    submitadd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var isimg = true;
          this.$refs.Upload.$el.children[0].children[0].children.forEach(
            (item) => {
              console.log(item.className);
              if (item.className == "el-upload-list__item is-ready") {
                isimg = false;
              }
            }
          );
          if (isimg == false) {
            this.$message({
              message: "请点击上传到服务器！后重试~",
              type: "error",
            });
            return false;
          }
          // this.ruleForm.specification_ids=this.ruleForm.specification
          addSpecification(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.isProduct = false;
              this.$message.success("提交成功");
              this.getlist();
              this.imgUrl = "";
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getlist() {
      getSpecificationList({ ...this.pagination, ...this.ser }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    specification_clickfalse() {
      this.getProduct();
    },
    specification_click() {
      this.pagination = {
        per_page: 10,
        page: 1,
      };
      getSpecificationList({
        ...this.ser,
        ...this.pagination,
      }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },
    del_product(row) {
      deleteSpecification({ id: row.id, is_del: 1 }).then((res) => {
        if (res.code == 200) {
          this.isProduct = false;
          this.$message.success("提交成功");
          this.getlist();
        }
      });
    },
  },
};
</script>

<style>
.el-input-number {
  max-width: 140px;
}

.el-col-9 .el-input {
  width: 200px;
  margin: 0 22px;
}

.el-col-9 .el-input .el-input__inner {
  text-align: center;
}
</style>
